<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>navbar</title>
</head>
<body>

<!--
用法:
<div th:insert="~{ /common/common_bar:: navbar}"></div>
<div th:insert="~{ /common/common_bar:: toolbar}"></div>
<div th:insert="~{ /common/common_bar:: toolbar('xx筛选')}"></div>
<div th:insert="~{ /common/common_bar:: modal}"></div>
<div th:insert="~{ /common/common_bar:: confirm('名称')}"></div>

-->
<div th:fragment="navbar">
    <div class="container-fluid ">
        <!--导航-->
        <nav class="navbar navbar-inverse">
            <div class="container-fluid">
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <h4 style="display: inline;line-height: 50px;float: left;margin: 0px">
                        <a href="/index" style="color: white;margin-left: -14px">后台管理系统</a>
                    </h4>
                    <div class="navbar-header">
                        <ul class="nav navbar-nav">
                        </ul>
                    </div>
                    <ul class="nav navbar-nav navbar-right">
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">
                                <div id="admin">admin</div>
                                <span class="caret"></span>
                            </a>
                            <ul class="dropdown-menu">
                                <li><a href="/changePass">修改密码</a></li>
                                <li role="separator" class="divider"></li>
                                <li onclick="logout()"><a href="#">退出</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
        <!--导航end-->
    </div>
</div>

<!--公用的toolbar-->
<div th:fragment="toolbar(type)">
    <div id="toolbar" class="btn-group">
        <!--   <button id="btn_add" type="button" class="btn btn-default">
               <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
           </button>-->
        <!--  <button id="btn_edit" type="button" class="btn btn-default">
              <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
          </button>-->
        <button id="btn_delete" type="button" class="btn btn-default hidden">
            <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
        </button>
        <button class="btn btn-default hidden" data-toggle="modal" data-target="#myModal" id="scan_btn">
            <span class="glyphicon glyphicon-leaf" aria-hidden="true"></span>扫描导入
        </button>

        <!-- single button -->
        <button type="button" class="btn btn-default dropdown-toggle glyphicon glyphicon-qrcode hidden"
                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" th:text="${type}" id="customer_select_btn">

            筛选 <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" style="right:0" id="customer_select">
        </ul>

        <button id="btn_publish" type="button" class="btn btn-default hidden" >
            <span class="glyphicon glyphicon-send" aria-hidden="true"></span>发布更新
        </button>

        <button id="btn_export" type="button" class="btn btn-default hidden" >
            <span class="glyphicon glyphicon-open" aria-hidden="true"></span>数据导出
        </button>

    </div>
</div>

<div th:fragment="modal">
    <!-- 模态框（Modal） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">模态框（Modal）标题</h4>
                </div>
                <div class="modal-body">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary">提交更改</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
</div>


<!--右上角的确认和清空按钮-->
<div th:fragment="confirm(typeName)">
    <div class="panel-heading">
        <h3 class="panel-title" style="display: inline-block" id="typeTitle"></h3>
        <div style="position: absolute;left: 0.5%;top: 2.25%;">
            <button class="btn btn-primary" type="button" style="" onclick="confirmVal()">确定</button>
            <button class="btn btn-danger" type="button" style="" onclick="clearVal()">清空</button>
        </div>
    </div>
</div>


</body>
</html>